<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
    <a class="navbar-brand" href="{% url 'index' %}">P365</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header" aria-controls="#header" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="header">
        <ul class="navbar-nav navbar-center text-right">
            <li class="nav-item{% if active == 'calendar' %} active{% endif %}">
                <a class="nav-link" href="{% url 'calendar:view' %}">Calendar</a>
            </li>
            <li class="nav-item{% if active == 'map' %} active{% endif %}">
                <a class="nav-link" href="{% url 'map:view' %}">Map</a>
            </li>
            <li class="nav-item{% if active == 'table' %} active{% endif %}">
                <a class="nav-link" href="{% url 'table:view' %}">Table</a>
            </li>
            <li class="nav-item{% if active == 'stories' %} active{% endif %}">
                <a class="nav-link" href="{% url 'story:stories' %}">Stories</a>
            </li>
        </ul>
        {% if not user.is_authenticated %}
        <ul class="navbar-nav ml-auto text-right">
            <li class="divider"></li>
            <li class="nav-item{% if active == 'signup' %} active{% endif %}">
                <a class="nav-link" href="{% url 'signup' %}"><span class="fas fa-user-circle"></span> Sign Up</a>
            </li>
            <li class="nav-item{% if active == 'login' %} active{% endif %}">
                <a class="nav-link" href="{% url 'login' %}"><span class="fas fa-sign-in-alt"></span> Login</a>
            </li>
        </ul>
        {% else %}
        <ul class="navbar-nav ml-auto text-right">
            <li class="dropdown">
                <a href="{% url 'user:profile' user %}" class="nav-link dropdown-toggle" data-toggle="dropdown">
                    <img src="{{ user.profilemodel.pic.url }}" alt="userpic"> {{ user.username }}
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a class="nav-link" href="{% url 'user:profile' user %}">
                            <span class="fas fa-user-circle"></span> Profile
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="nav-link" href="#">
                            <span class="fas fa-chart-line"></span> User stats
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="nav-link" href="{% url 'logout' %}">
                            <span class="fas fa-sign-out-alt"></span> Logout
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        {% endif %}
    </div>
</nav>
